<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<link rel="stylesheet" href="css/mui.min.css">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">

			<table style="border:1px solid green;width: 100%;">
				<tr>
					<dt style="display: inline-block;">
						<div style="margin-left: 1rem;margin-top: 1rem;">
						<a class="mui-icon mui-icon-info-filled " href="#popover" id="openPopover">
							<p style="font-size: 12px;">警告</p>
						</a>
						<div id="popover" class="mui-popover">
							<ul class="mui-table-view mui-table-view">

								<li class="mui-table-view-cell mui-media">
									<a href="javascript:;">

										<div class="mui-media-body">
											<div class="mui-input-row">
												<div class="mui-icon mui-icon-info-filled "></div>
												PM10超标警报
											</div>
											<p style="font-size: 10px; ">河南国家科技大学城&emsp;&emsp;PM10=101.00ug/m3</p>
											<p style="font-size: 10px; ">更新时间:2017/7/31&emsp;&emsp;21:49</p>
										</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media">
									<a href="javascript:;">

										<div class="mui-media-body">
											<div class="mui-input-row">
												<div class="mui-icon mui-icon-info-filled "></div>
												PM10超标警报
											</div>
											<p style="font-size: 10px; ">河南国家科技大学城&emsp;&emsp;PM10=101.00ug/m3</p>
											<p style="font-size: 10px; ">更新时间:2017/7/31&emsp;&emsp;21:49</p>
										</div>
									</a>
								</li>
								<li class="mui-table-view-cell mui-media">
									<a href="javascript:;">

										<div class="mui-media-body">
											<div class="mui-input-row">
												<div class="mui-icon mui-icon-info-filled "></div>
												PM10超标警报
											</div>
											<p style="font-size: 10px; ">河南国家科技大学城&emsp;&emsp;PM10=101.00ug/m3</p>
											<p style="font-size: 10px; ">更新时间:2017/7/31&emsp;&emsp;21:49</p>
										</div>
									</a>
								</li>
							</ul>
						</div>
						</div>
					</dt>
					<dt></dt>
					<dt></dt>
				</tr>
				<tr>
					<td style="width: 60%;">

						<p style=" font-size: 16px;font-weight: bold;margin-left: 4rem; ">空气质量指数</p>
						<p style="font-size: 20px;font-weight: bold;margin-left: 6rem; ">21&#8451;</p>

					</td>
					<td style="width: 40%; ">
						<div style="margin-left: 2rem; ">
							<p style="font-size: 22px;font-weight: bold; ">郑州</p>
							<div border="1 " align="center " style="background: greenyellow;width: 50px; ">
								<p> 优</p>
							</div>
						</div>
					</td>
					<td>

					</td>
				</tr>

				<tr>

				</tr>
			</table>
			<table>
				<tr>
					<td style="width: 20%; "> <img style="margin-left:2rem; " class=" mui-pull-left " src="images/bike.png ">
					</td>
					<td colspan="2">
						<p style="margin-left: 2rem;margin-top: 1rem; "> 空气质量很好，不用防护。</p>
					</td>
				</tr>
				<tr>
					<td style="width: 20%; "> <img style="margin-left:2rem; " class=" mui-pull-rgin-top: 1rem;left " src="images/time.png ">
					</td>
					<td>
						<p style="margin-left: 2rem;margin-top: 1rem; "> 2017/8/1&emsp;8:37</p>
					</td>
					<td>
						<p style="; margin-left: 5rem;margin-top: 1rem; ">多云</p>
					</td>
				</tr>
				<tr>
					<td style="width: 20%; "> <img style="margin-left:2rem; " class=" mui-pull-rgin-top: 1rem;left " src="images/map.png">
					</td>
					<td>
						<p style="margin-left: 2rem;margin-top: 1rem; ">河南国家科技园</p>
					</td>
					<td>
						<p style="margin-left: 4rem;margin-top: 1rem; ">2℃-15℃</p>
					</td>
				</tr>
			</table>

			<ul style="background: #B6B6B6; margin-top: 1rem;" class="mui-table-view mui-grid-view mui-grid-9 ">
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 ">

					<p style="font-size: 16px;font-weight: bold;text-align: center; ">PM2.5</p>
					<p style="font-size: 14px;font-weight: bold;text-align: center; ">﹝μg/m³﹞</p>

					<p style="font-size: 20px;font-weight: bold;text-align: center; ">8</p>

				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 ">

					<p style="font-size: 16px;font-weight: bold;text-align: center; ">PM10</p>
					<p style="font-size: 14px;font-weight: bold;text-align: center; ">﹝μg/m³﹞</p>

					<p style="font-size: 20px;font-weight: bold;text-align: center; ">28</p>

				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 ">

					<p style="font-size: 16px;font-weight: bold;text-align: center; ">O₃</p>
					<p style="font-size: 14px;font-weight: bold;text-align: center; ">﹝μg/m³﹞</p>

					<p style="font-size: 20px;font-weight: bold;text-align: center; ">103</p>

				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 ">

					<p style="font-size: 16px;font-weight: bold;text-align: center; ">SO₂</p>
					<p style="font-size: 14px;font-weight: bold;text-align: center; ">﹝μg/m³﹞</p>

					<p style="font-size: 20px;font-weight: bold;text-align: center; ">8</p>

				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 ">

					<p style="font-size: 16px;font-weight: bold;text-align: center; ">噪声</p>
					<p style="font-size: 14px;font-weight: bold;text-align: center; ">﹝dB﹞</p>

					<p style="font-size: 20px;font-weight: bold;text-align: center; ">8</p>

				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 ">

					<p style="font-size: 16px;font-weight: bold;text-align: center; ">湿度</p>
					<p style="font-size: 14px;font-weight: bold;text-align: center; ">﹝%rh﹞</p>

					<p style="font-size: 20px;font-weight: bold;text-align: center; ">28</p>

				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 ">

					<p style="font-size: 16px;font-weight: bold;text-align: center; ">风速</p>
					<p style="font-size: 14px;font-weight: bold;text-align: center; ">﹝m/s﹞</p>

					<p style="font-size: 20px;font-weight: bold;text-align: center; ">103</p>

				</li>
				<li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3 ">

					<p style="font-size: 16px;font-weight: bold;text-align: center; ">风向</p>
					<p style="font-size: 14px;font-weight: bold;text-align: center; ">﹝°﹞</p>

					<p style="font-size: 20px;font-weight: bold;text-align: center; ">8</p>

				</li>
			</ul>

		</div>

	</body>
	<script src="js/mui.min.js "></script>
	<script>
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});
	</script>

</html>